<%@page import="fy.com.util.PageData"%>
<%@page import="org.apache.commons.fileupload.RequestContext"%>
<%@ page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YMTbTDRBfbZAutGicmZGnytO"></script>
	<link rel="stylesheet" href="static/css/map.css">
	<title>地图展示</title>
	<%@ include file="../top.jsp"%>
	<%@ include file="../nav.jsp"%>
	</head>
	
<body >
<div id="allmap"></div>
<div id="device">
    <table class="device_table" border="1" >
        <thead>
            <tr>
	            <th><label><input type="checkbox" id="zcheckbox" /><span class="lbl"></span></label></th>
	            <th>设备ID</th>
	            <th>状态</th>
	            <th>地理位置</th>
	         </tr>
        </thead>
        <tbody>
            <tr>
				<%! int i = 0  ;%> 
	          	<c:choose>
					<c:when test="${not empty dList}">
						<c:forEach items="${dList}" var="var" varStatus="vs" >
	    				 <%	pageContext.setAttribute("a", i);
							i++;
						%>
				<tr>
					<td><label><input type="checkbox" id="checkbox" /><span class="lbl"></span></label></td>
					<td><a href="graph.do?eid=${var.eid}" title="点击进入实时状态" >设备${var.eid}</a>
					</td>
					<td>${sList[a].status}</td>
					<td>${var.location}</td>
				</tr>
						</c:forEach>
					</c:when>
				</c:choose>
			</tr>
        </tbody>
    </table>
</div>
	
</body>
</html>

<script type="text/javascript">
    
// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(114.325,30.383);
	map.centerAndZoom(point, 12);
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	window.onload=function addInco(){
		 var longitude=new Array();
		 var latitude=new Array();
	     var location=new Array();
		<%
		List<PageData> list = (List<PageData>)request.getAttribute("dList") ;
		final int size =list.size();
		request.setAttribute("size", size);
	 	%>
		<%
		for(int i=0;i<list.size();i++){
		%>
			location[<%=i%>]='<%=list.get(i).getString("location")%> ';
			longitude[<%=i%>]='<%=Float.parseFloat(list.get(i).get("longitude").toString() )%>';
			latitude[<%=i%>]='<%=Float.parseFloat(list.get(i).get("latitude").toString() )%>';
			<%
			}
			%>
			var size='${pageContext.request.getAttribute('size')}'; 
			for(var i=0;i<size;i++){
				var opts = {
						width : 250,     // 信息窗口宽度
						height: 80,     // 信息窗口高度
						title : "信息窗口" , // 信息窗口标题
						enableMessage:true//设置允许信息窗发送短息
					   };
				var marker = new BMap.Marker(new BMap.Point(longitude[i],latitude[i]));
				var content = location[i];
				map.addOverlay(marker);               // 将标注添加到地图中
				addClickHandler(content,marker);
			}
			function addClickHandler(content,marker){
				marker.addEventListener("mouseover",function(e){
					openInfo(content,e);}
				);
			}
			function openInfo(content,e){
				var p = e.target;
				var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
				var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
				map.openInfoWindow(infoWindow,point); //开启信息窗口
			}
	}
//按地区进行查找
	function theLocation(){
		var city = document.getElementById("cityName").value;
		if(city != ""){
			map.centerAndZoom(city,12);      // 用城市名设置地图中心点
		}
	}
//按状态进行查找
		function selectStatus(value){
		 alert(value);
		
	}
	$(function() {
		//复选框
		
		$('table th input:checkbox').on('click' , function(){
			var that = this;
			$(this).closest('table').find('tr > td:first-child input:checkbox')
			.each(function(){
				this.checked = that.checked;
				$(this).closest('tr').toggleClass('selected');
			});
				
		});
		
	});
	</script>


</html>
